<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>移动端垂直弹性布局演示</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.wrap{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				background: pink;
			}
			header,footer{
				height: 44px;
				background: lightblue;
				text-align: center;
			}
			.wrap section{
				box-sizing: border-box;
				border: 1px red solid;
				flex: 1;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<header>title</header>
			<section class="maincon">
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
				<p>content...</p>
			</section>
			<footer>footer</footer>
		</div>
	</body>
</html>
